<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="AddData" :rules="rules" ref="AddData">
        <el-form-item label="一级分类">
          <el-select v-model="AddData.General" @change="changeName" placeholder="请选择">
            <el-option
              v-for="item in General1"
              :key="item.id"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select v-model="AddData.types" clearable placeholder="请选择">
            <el-option v-for="item in name1" :key="item.id" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="AddData.name"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="AddData.model"></el-input>
        </el-form-item>
        <el-form-item label="商品编码" prop="code">
          <el-input v-model="AddData.code"></el-input>
        </el-form-item>
        <el-form-item label="入库数量" prop="num">
          <el-input-number :min="1" v-model="AddData.num"></el-input-number>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input v-model.number="AddData.price"></el-input>
        </el-form-item>
        <el-form-item label="厂商">
          <el-input v-model="AddData.manufacturer"></el-input>
        </el-form-item>
        <el-form-item label="仓库" prop="site">
          <el-input v-model="AddData.site"></el-input>
        </el-form-item>
        <el-form-item label="入库人" prop="username">
          <el-input v-model="AddData.username"></el-input>
        </el-form-item>
        <div>
          <el-form-item label="备注">
            <el-input type="textarea" cols="200" v-model="AddData.remark"></el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-plus"
            style="margin-left:40px"
            @click="addcomm('AddData')"
          >入库</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--搜索-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;    background: #fff;">
      <el-form :inline="true" :model="filters" ref="filters">
        <el-form-item label="一级分类">
          <el-select v-model="filters.General" @change="changeName" placeholder="请选择">
            <el-option
              v-for="item in General1"
              :key="item.id"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级大类">
          <el-select v-model="filters.types" clearable placeholder="请选择">
            <el-option v-for="item in name1" :key="item.id" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="filters.name"></el-input>
        </el-form-item>
        <el-form-item label="接收人">
          <el-input v-model="filters.username"></el-input>
        </el-form-item>
        <el-form-item label="仓库">
          <el-input v-model="filters.site"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" v-on:click="getQuerys()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <Table
      :list="users"
      @handleSelectionChange="handleSelectionChange"
      :options="options"
      :columns="columns"
      :operates="operates"
    ></Table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="20"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>

		<!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form :inline="true" :model="AddData1" :rules="rules" ref="AddData">
        <el-form-item label="一级分类">
          <el-select v-model="AddData1.General" @change="changeName" placeholder="请选择">
            <el-option
              v-for="item in General1"
              :key="item.id"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select v-model="AddData1.types" clearable placeholder="请选择">
            <el-option v-for="item in name1" :key="item.id" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="AddData1.name"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="AddData1.model"></el-input>
        </el-form-item>
        <el-form-item label="商品编码">
          <el-input v-model="AddData1.code" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="入库数量" prop="num">
          <el-input-number :min="1" v-model="AddData1.num"></el-input-number>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input v-model="AddData1.price"></el-input>
        </el-form-item>
        <el-form-item label="厂商">
          <el-input v-model="AddData1.manufacturer"></el-input>
        </el-form-item>
        <el-form-item label="仓库" prop="site">
          <el-input v-model="AddData1.site"></el-input>
        </el-form-item>
        <el-form-item label="入库人" prop="username">
          <el-input v-model="AddData1.username"></el-input>
        </el-form-item>
        <div>
          <el-form-item label="备注">
            <el-input type="textarea" cols="200" v-model="AddData1.remark"></el-input>
          </el-form-item>
        </div>
      </el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--库存界面-->
		<el-dialog title="库存" :visible.sync="storFormVisible" :close-on-click-modal="false">
      <el-form :inline="true" :model="AddData2" :rules="rules" ref="AddData">
        <el-form-item label="入库数量" prop="num">
          <el-input-number :min="1" v-model="AddData2.num"></el-input-number>
        </el-form-item>
        <el-form-item label="仓库" prop="site">
          <el-input v-model="AddData2.site"></el-input>
        </el-form-item>
      </el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="storFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="handleStorsit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
  </section>
</template>

<script>
import Table from "../../components/Table";
import { type1, insertCommodity, listpage,listDelete,getone,update,getstor } from "../../api/api";

export default {
  components: { Table },
  data() {
    return {
      columns: [
        {
          prop: "typename",
          label: "商品大类",
          align: "center"
        },
        {
          prop: "name",
          label: "商品名称",
          align: "center"
        },
        {
          prop: "model",
          label: "规格型号",
          align: "center"
        },
        {
          prop: "code",
          label: "商品编码",
          align: "center"
        },
        {
          prop: "num",
          label: "入库数量",
          align: "center"
        },
        {
          prop: "price",
          label: "单价",
          align: "center"
        },
        {
          prop: "site",
          label: "仓库",
          align: "center"
        },
        {
          prop: "manufacturer",
          label: "厂商",
          align: "center"
        },
        {
          prop: "create_time",
          label: "入库日期",
          align: "center",
          width:"250"
        },
        {
          prop: "username",
          label: "入库人",
          align: "center"
        },
        {
          prop: "name",
          label: "备注",
          align: "center"
        }
      ],
      users: [],
      options: {
        stripe: false, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: false, // 是否支持列表项选中功能
        radioSelect: false, //是否支持列表项 单选 选中功能
        isShowProp: true,
        isShow: false
      },
      operates: {
        width: 200,
        fixed: "right",
        list: [
          {
            id: "2",
            label: "编辑",
            type: "wrang",
            show: true,
            icon: "el-icon-edit",
            plain: true,
            disabled: false,
            method: (index, row) => {
              this.handleUpdate(index, row);
            }
          },
          {
            id: "1",
            label: "删除",
            type: "danger",
            show: true,
            icon: "el-icon-delete",
            plain: true,
            disabled: false,
            method: (index, row) => {
              this.handleDel(index, row);
            }
          },
          {
            id: "3",
            label: "存库",
            type: "primary",
            show: true,
            icon: "el-icon-box",
            plain: true,
            disabled: false,
            method: (index, row) => {
              this.handleStor(index, row);
            }
          }
        ]
      }, // 列操作按钮
      AddData: {
        General: "",
        types: "",
        name: "",
        model: "",
        num: "",
        Price: "",
        manufacturer: "",
        site: "",
        code: "",
        username: "",
        remark: ""
      },
      rules: {
        name: [{ required: true, message: "请填写商品名称", trigger: "blur" }],
        num: [{ required: true, message: "请填写数量", trigger: "blur" }],
        // price: [{ required: true, message: "请填写单价", trigger: "blur" },{ type: 'number', message: '单价必须为数字值'}],
        site: [{ required: true, message: "请填写仓库", trigger: "blur" }],
        username: [{ required: true, message: "请填写入库人", trigger: "blur" }],
        code: [{ required: true, message: "请填写商品编码", trigger: "blur" }]
      },
      AddData1:{},
      AddData2:{},
      General1: [],
      name1: [],

      filters: {},
      total: 0,
      page: 1,
      listLoading: false,
      sels: [], //列表选中列
			addFormVisible: false,//新增界面是否显示
      addLoading: false,
      storFormVisible:false
    };
  },
  methods: {
    handType() {
      type1()
        .then(res => {
          let dataType = res.data.data;
          if (res.data.code === 200) {
            this.General1 = dataType;
          } else {
            this.$message({
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(error => {
          console.log(error.response);
        });
    },
    changeName(value) {
      let params = {
        code: value
      };
      var code = value;

      type1(params)
        .then(res => {
          let secondData = res.data.data;
          if (res.data.code === 200) {
            this.name1 = secondData;
          } else {
            this.$message({
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(error => {
          console.log(error.response);
        });
    },
    addcomm(AddData) {
      var type = this.$refs.AddData.model.types;
      this.$refs[AddData].validate(valid => {
        if (valid) {
          let data = this.AddData;
          let AddData = {
            name: data.name,
            num: data.num,
            price: data.price,
            site: data.site,
            username: data.username,
            state: 2,
            type: type,
            code: data.code,
            model: data.model,
            manufacturer: data.manufacturer,
            remark: data.remark,
            asset: data.asset
          };
          insertCommodity(AddData)
            .then(res => {
              console.log(AddData);
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  type: "success"
                });
                this.AddData={brand_right:0}
                this.getLists();
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "error"
                });
              }
            })
            .catch(error => {
              console.log(error.response);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getLists();
    },
    //获取用户列表
    getLists() {
      let para = {
        page: this.page,
        username: this.username,
        type: this.type,
        name: this.name,
        site: this.site,
        state: 2
      };
      this.listLoading = true;
      listpage(para)
        .then(res => {
          this.listLoading = false;
          this.total = res.data.data.total_count;
          this.users = res.data.data.list;
        })
        .catch(error => {
          console.log(error.res.data);
        });
    },
    // 查询
    getQuerys(){
      var types = this.$refs.filters.model.types;
      // var General = this.$refs.filters.model.General;
      // console.log(types,General);
      
      if(types == ""){
        var type = types;
      }else {
        var type = types;
      }
      let para = {
      	page: this.page,
        username: this.filters.username,
        type:type,
        name:this.filters.name,
        site:this.filters.site,
        state:2
      };
      console.log(para);
      
      this.listLoading = true;
      listpage(para).then((res) => {
      	this.listLoading = false;
        this.total = res.data.data.total_count;
        this.users = res.data.data.list;
        console.log(this.users);
        
      }).catch(error => {
    	console.log(error.res.data);
    	});
    },
    //删除
    handleDel: function(index, row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para = { id: row.id };
          listDelete(para).then(res => {
            console.log(res);
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getLists();
          });
        })
        .catch(() => {});
    },
    //编辑回显
    handleUpdate: function(index, row) {
      this.listLoading = true;
      let para = { id: row.id };
      getone(para).then(res => {
        console.log(res.data);
        this.addFormVisible = true;
        this.AddData1 = res.data.data
      });
    },
			//编辑
    addSubmit(AddData) {
      var type = this.$refs.AddData.model.types;
				this.$refs.AddData.validate((valid) => {
					if (valid) {
              let data = this.AddData1;
              let para = {
                id:data.id,
                name: data.name,
                num: data.num,
                price: data.price,
                site: data.site,
                username: data.username,
                state: 2,
                type: type,
                code: data.code,
                model: data.model,
                manufacturer: data.manufacturer,
                remark: data.remark,
                asset: data.asset
              };
							update(para).then((res) => {
                if (res.data.code === 200) {
                  this.$message({
                    message: res.data.msg,
                    type: "success"
                  });
                  this.getLists();
                  this.addLoading = false;
                  this.$refs['AddData'].resetFields();
                  this.addFormVisible = false;
                } else {
                  this.$message({
                    message: "请选择分类",
                    type: "error"
                  });
                } 
                
							});
					}
				});
    },
    //库存回显
    handleStor: function(index, row) {
      this.listLoading = true;
      let para = { id: row.id };
      getone(para).then(res => {
        console.log(res.data);
        this.storFormVisible = true;
        this.AddData2 = res.data.data
      });
    },
    handleStorsit(AddData){
      let data = this.AddData2;
      let para = {
        id:data.id,
        num: data.num,
        site: data.site,
        code: data.code,
        newstate:3
      };
        console.log(para);
        getstor(para).then((res) => {
        console.log(res);
        
        if (res.data.code === 200) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          this.getLists();
          this.storFormVisible = false;
        }else{
          this.$message({
            message: res.data.msg,
            type: "eorr"
          });
        }
        
      });
    },
    // 选中行
    handleSelectionChange(val) {
      console.log("val:", val);
    },
  },
  mounted() {
    this.handType();
    this.getLists();
  }
};
</script>

<style scoped>
.el-form--inline .el-form-item{
  margin-bottom: 20px;
}
</style>